<template>
	<view>
		<view class="flex flex-x-y flex-d-c" style="margin-top: 60rpx;">
			<view v-if="!canceled" class="flex flex-x-y flex-d-c">
				<view class="fs-24 color-999999">
					文件下载中...({{downloadedNum}}/{{totalNum}})
				</view>

				<view class="jindu flex flex-x-y">
					<view class="jindu-all">
						<view class="jindu-ing" :style="{width: width}"></view>
					</view>

					<view @tap.stop="cancel" class="ml-16 iconfont icon-guanbi-" style="color: #E04646;"></view>
				</view>
			</view>
			<view v-else @tap.stop="restart" class="continue">
				继续下载({{theRest}})
			</view>
			<!-- <view v-else @tap.stop="openfile" class="continue">
				打开
			</view> -->

		</view>
	</view>
</template>

<script>
	export default {
		name: "progress-bar",
		data() {
			return {
				canceled: false,
				totalNum: this.total,
				downloadedNum: this.downloaded
			};
		},
		props: {
			total: {
				type: String,
				default: '0kb'
			},
			downloaded: {
				type: String,
				default: '0kb'
			}
		},
		computed: {
			width() {
				return parseFloat(this.downloadedNum) / parseFloat(this.totalNum) * 100 + '%'
			},
			theRest() {
				return  parseFloat(this.totalNum) - parseFloat(this.downloadedNum) + 'kb'
			},
		},
		methods: {
			cancel() {
				this.canceled = true
			},
			restart() {
				this.canceled = false
				this.totalNum = this.theRest
				this.downloadedNum = '0kb'
			},
			openfile() {
				
			}
		}
	}
</script>

<style lang="scss">
	.jindu-all {
		width: 554rpx;
		height: 8rpx;
		background: #CACACA;
		border-radius: 4rpx;
		position: relative;
	}

	.jindu-ing {
		position: absolute;
		left: 0;
		top: 0;
		background-color: $color;
		height: 8rpx;
		border-radius: 4rpx;
	}
	.continue {
		padding: 20rpx;
		background-color: $color;
		color: #fff;
		border-radius: 15rpx;
	}
</style>